    //tab切换
    var box = document.querySelector('.box')
    var ol = document.querySelector('.box ol')
    var ulis = document.querySelectorAll('.box ul li')
    var olis = document.querySelectorAll('.box ol li')
    // console.log(box,ulis,olis);
    for (let i = 0; i < ulis.length - 1; i++) {
        console.log(box,ol);
        ulis[i].onmouseover = function () {
            for (let j = 0; j < ulis.length - 1; j++) {
                ulis[j].className = ''
                olis[j].className = ''
                ol.className = ''
            }
            getStyle(box, 'height')
            // console.dir(box);
            ulis[i].className = 'active'
            olis[i].className = 'active'
            ol.className = 'active'
        }
        // var timerId = setInterval(function(){
            olis[i].onmouseout = function () {
                ulis[i].className = ''
                olis[i].className = ''
                ol.className = ''
            }
        // },1000)
        
    }

    //轮播
    var content1 = document.querySelector('.content1')
    var active = document.querySelector('.active')
    var ul1 = document.querySelector('.content1 ul')
    var ol1 = document.querySelector('.content1 ol')
    var leftBtn = document.querySelector('.leftBtn')
    var rightBtn = document.querySelector('.rightBtn')

    for (var i = 0; i < ul1.children.length; i++) {
        // console.log(ul1.children.length);
        var li = document.createElement('li')
        ol1.appendChild(li)
        if (i === 0) {
            li.style.backgroundColor = 'black'
        }
    }
    var firstLi = ul1.firstElementChild.cloneNode(true);
    var lastLi = ul1.lastElementChild.cloneNode(true);
    ul1.appendChild(firstLi);
    ul1.insertBefore(lastLi, ul1.firstElementChild)
    ul1.style.width = ul1.children.length * firstLi.offsetWidth + 'px'
    ul1.style.left = -firstLi.offsetWidth + 'px'
    var index = 1;
    var flag = true;
    // console.log(rightBtn);
    // console.log(111);
    // 右按钮点击
    rightBtn.onclick = function () {
        console.log(111);
        // return false
        if (!flag) {
            return false;
        }
        flag = false;
        index++;
        animate(ul1, {
            left: -index * firstLi.offsetWidth
        }, function () {
            if (index === ul1.children.length - 1) {
                index = 1;
                ul1.style.left = -index * firstLi.offsetWidth + 'px';
            }
            for (var i = 0; i < ol1.children.length; i++) {
                ol1.children[i].style.backgroundColor = 'black'
            }
            ol1.children[index - 1].style.backgroundColor = 'red'
            // 运动结束打开开关
            flag = true;
        })
    }
    // 左按钮点击
    leftBtn.onclick = function () {
        if (!flag) {
            return false
        }
        flag = false
        index--;
        animate(ul1, {
            left: -index * firstLi.offsetWidth
        }, function () {
            if (index === 0) {
                index = ul1.children.length - 2;
                ul1.style.left = -index * firstLi.offsetWidth + 'px';
            }
            for (var i = 0; i < ol1.children.length; i++) {
                ol1.children[i].style.backgroundColor = 'black'
            }
            ol1.children[index - 1].style.backgroundColor = 'red'
            flag = true;
        })
        // return false;
    }
    // 小圆点点击
    for (let j = 0; j < ol1.children.length; j++) {
        ol1.children[j].onclick = function () {
            if (!flag) {
                return false
            }
            flag = false
            index = j + 1;
            animate(ul1, {
                left: -index * firstLi.offsetWidth
            }, function () {
                if (index === 0) {
                    index = ul1.children.length - 2;
                    ul1.style.left = -index * firstLi.offsetWidth + 'px';
                }
                for (var i = 0; i < ol1.children.length; i++) {
                    ol1.children[i].style.backgroundColor = 'black'
                }
                ol1.children[index - 1].style.backgroundColor = 'red'
                flag = true
            })
        }
    }
    // 自动轮播
    var timerId = setInterval(function () {
        if (!flag) {
            return false
        }
        flag = false
        index++;
        animate(ul1, {
            left: -index * firstLi.offsetWidth
        },
            function () {
                if (index === ul1.children.length - 1) {
                    index = 1;
                    ul1.style.left = -index * firstLi.offsetWidth + 'px';
                }
                for (var i = 0; i < ol1.children.length; i++) {
                    ol1.children[i].style.backgroundColor = 'black'
                }
                ol1.children[index - 1].style.backgroundColor = 'red'
                flag = true
            })
    }, 1000)
    // 鼠标滑入
    content1.onmouseover = function () {
        clearInterval(timerId)
    }
    // 鼠标滑出
    content1.onmouseout = function () {
        timerId = setInterval(function () {
            if (!flag) {
                return false;
            }
            flag = false
            index++;
            animate(ul1, {
                left: -index * firstLi.offsetWidth
            }, function () {
                // 判断是否需要秒切
                if (index === ul1.children.length - 1) {
                    index = 1
                    ul1.style.left = -index * firstLi.offsetWidth + 'px'
                    // console.log(index, firstLi.offsetWidth);
                }
                // 先将所有小圆点的背景改成黑色
                for (var i = 0; i < ol1.children.length; i++) {
                    ol1.children[i].style.backgroundColor = '#000';
                }
                ol1.children[index - 1].style.backgroundColor = 'red';
                flag = true
            })
        }, 1000)
    }


    var content4 = document.querySelector('.content4')
    var ul2 = document.querySelector('.content4 ul')
    var ol2 = document.querySelector('.content4 ol')
    // console.log(ol2);
    var ulis2 = document.querySelectorAll('.content4 ul li')
    var olis2 = document.querySelectorAll('.content4 ol li')
    var rightB = document.querySelector('.content4 .rightB')
    var leftB = document.querySelector('.content4 .leftB')
    // console.log(ul2.children.length);
    for (var i = 0; i < ul2.children.length; i++) {
        var li2 = document.createElement('li')
        ol2.appendChild(li2);
        if (i === 0) {
            li2.style.backgroundColor = 'red';
        }

    }

    var firstLi2 = ul2.firstElementChild.cloneNode(true);
    var lastLi2 = ul2.lastElementChild.cloneNode(true);
    ul2.appendChild(firstLi2);
    ul2.insertBefore(lastLi2, ul2.firstElementChild)
    // console.log(ul2.children.length * firstLi2.offsetWidth);
    // console.log(firstLi2.offsetWidth)
    // console.log(ul2.children.length );
    // console.log(ul2);
    ul2.style.width = ul2.children.length * firstLi2.offsetWidth + 'px';
    ul2.style.left = -firstLi2.offsetWidth + 'px';
    var index2 = 1;

    var flag = true;
    // console.log(rightB);
    // 右按钮点击
    rightB.onclick = function () {
        // console.log(123);
        if (!flag) {
            return false;
        }
        flag = false;
        index2++;
        animate(ul2, {
            left: -index2 * firstLi2.offsetWidth
        }, function () {
            if (index2 === ul2.children.length - 1) {
                index2 = 1;
                ul2.style.left = -index2 * firstLi2.offsetWidth + 'px';
            }
            for (var i = 0; i < ol2.children.length; i++) {
                ol2.children[i].style.backgroundColor = 'black'
            }
            ol2.children[index2 - 1].style.backgroundColor = 'red'
            // 运动结束打开开关
            flag = true;
        })
    }
    // 左按钮点击
    leftB.onclick = function () {
        if (!flag) {
            return false;
        }
        flag = false;
        index2--;
        animate(ul2, {
            left: -index2 * firstLi2.offsetWidth
        }, function () {
            if (index2 === 0) {
                index2 = ul2.children.length - 2;
                ul2.style.left = -index2 * firstLi2.offsetWidth + 'px';
            }
            for (var i = 0; i < ol2.children.length; i++) {
                ol2.children[i].style.backgroundColor = 'black'
            }
            ol2.children[index2 - 1].style.backgroundColor = 'red'
            // 运动结束打开开关
            flag = true;
        })
    }
    // 小圆点点击
    for (let j = 0; j < ol2.children.length; j++) {
        ol2.children[j].onclick = function () {
            if (!flag) {
                return false
            }
            flag = false
            index2 = j + 1;
            animate(ul2, {
                left: -index2 * firstLi2.offsetWidth
            }, function () {
                if (index2 === 0) {
                    index2 = ul2.children.length - 2;
                    ul2.style.left = -index2 * firstLi2.offsetWidth + 'px';
                }
                for (var i = 0; i < ol2.children.length; i++) {
                    ol2.children[i].style.backgroundColor = 'black'
                }
                ol2.children[index2 - 1].style.backgroundColor = 'red'
                flag = true
            })
        }
    }
    // 自动轮播
    var timerId2 = setInterval(function () {
        if (!flag) {
            return false
        }
        flag = false
        index2++;
        animate(ul2, {
            left: -index2 * firstLi2.offsetWidth
        },
            function () {
                if (index2 === ul2.children.length - 1) {
                    index2 = 1;
                    ul2.style.left = -index2 * firstLi2.offsetWidth + 'px';
                }
                for (var i = 0; i < ol2.children.length; i++) {
                    ol2.children[i].style.backgroundColor = 'black'
                }
                ol2.children[index2 - 1].style.backgroundColor = 'red'
                flag = true
            })
    }, 1000)
    // 移入移出
    content4.onmouseover = function () {
        clearInterval(timerId2)
    }
    content4.onmouseout = function () {
        timerId2 = setInterval(function () {
            if (!flag) {
                return false;
            }
            flag = false
            index2++;
            animate(ul2, {
                left: -index2 * firstLi2.offsetWidth
            }, function () {
                // 判断是否需要秒切
                if (index2 === ul2.children.length - 1) {
                    index2 = 1
                    ul2.style.left = -index2 * firstLi2.offsetWidth + 'px'
                    console.log(index2, firstLi2.offsetWidth);
                }
                // 先将所有小圆点的背景改成黑色
                for (var i = 0; i < ol2.children.length; i++) {
                    ol2.children[i].style.backgroundColor = '#000';
                }
                ol2.children[index2 - 1].style.backgroundColor = 'red';
                flag = true
            })
        }, 1000)
    }

    //获取id和token
    var id = localStorage.getItem('id')
    var token = localStorage.getItem('token')
    var login = document.querySelector('.login')

        if(id && token){
        console.log( document.querySelector('.list'));
        // document.querySelector('.list').setAttribute('href',"list.html?token="+token+'&id='+id)
        document.querySelector('.cart').setAttribute('href',"cart.html")
        // ?token="+token+'&id='+id
        // console.log(document.querySelector('.list'));
        var xhr = new XMLHttpRequest;
        xhr.open('get',`http://localhost:8888/users/info/${id}`)
        xhr.setRequestHeader('authorization',token)
        xhr.send()
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300){
                    var res = xhr.responseText;
                    // console.log(res);
                    res = JSON.parse(res)
                    console.log(res);
                    login.innerHTML = `
                    <a href="userinfo.html?id=${id}&token=${token}" class="user">登录成功</a>
                    <a data-id="${id}" data-token="${token}" href="javascript:;" class="logout">退出</a>
                    `
                }
            }
        }
    }
    // var login = document.querySelector('.login')
    login.onclick = function(){
        var target = window.event.target || window.event.srcElement;
        if(target.className === 'logout') {
            var xhr = new XMLHttpRequest;
            xhr.open('get','http://localhost:8888/users/logout/'+target.getAttribute('data-id'))
            xhr.setRequestHeader('authorization',target.getAttribute('token'))
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        var res = xhr.responseText;
                        res = JSON.parse(res)
                        console.log(res);
                        localStorage.removeItem('id');
                        localStorage.removeItem('token');
                        var {code,message} = res;
                        if(code === 1){
                            alert(message)
                            location.href = 'home.html'
                        }
                    }
                }
            }
        }
    }

